<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
        <meta name="format-detection" content="telephone=no" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="../css/aui.css" />
        <link rel="stylesheet" type="text/css" href="../css/aui-flex.css" />
        <style>
            body{
                background: transparent;
                position: relative;
            }
            .content{
                background: #f3f3f3;
                position: fixed;
                bottom: 0;left: 0;
                width: 100%;
            }
            #header-content{
                font-size: 14px;
            }
            footer .aui-flex-item-6{
                text-align: center;
                height:55px;line-height: 55px;   
                color: #fff;
            }
            .mt-5{
                margin-top: 5px;
            }
            .text-price{
                font-size: 18px;
            }
            .text-gray{
                color:#666;
            }
            .aui-list-view:after,.stockcell .aui-list-view-cell:last-child:after{
                border: none;
            }
            .font-small{
                font-size: 12px;
            }
            .stockcell .desc{
                padding-top:5px;
            }
            #yanse ul{
                height: 40px;
                position: absolute;
                left:0;top:0;
            }
            #yanse li{
                float:left;
                height: 100%;
                line-height: 40px;
                padding: 0 10px;
            }
            #yanse li.active{
                color:#327afa;
            }
            .aui-flex-item-1{
                text-align: center;
                padding-top:8px;
                background: #fff;
                z-index: 999;
            }
        </style>
    </head>
    <body>
        <div class="content">
            <div id="header-content" class="text-gray" style="position: relative;">
                
            </div>
            <footer class="aui-nav" id="aui-footer" style="height:95px;position: relative;">
                <div class="aui-border-t" style="height:40px;line-height:40px;padding:0 10px;text-align: right;font-size: 12px;">
                    共 <span class="aui-text-danger" id="totalCount">--</span> 条，合计 <span class="aui-text-danger">¥<span id="totalPrice">--</span></span>
                </div>
                <div class="aui-content">
                    <div class="aui-flex-col">
                        <div class="aui-flex-item-6 aui-bg-warning" id="add2Cart">加入进货单</div>
                        <div class="aui-flex-item-6 aui-bg-danger" id="buyNow">立即订购</div>
                    </div>
                </div>
            </footer>
        </div>
    </body>
    <script id="header-content-template" type="text/x-dot-template">
        <ul class="aui-list-view">
            <li class="aui-list-view-cell aui-img">
                <img class="aui-img-object aui-border aui-pull-left" src="{{=it.itemData.thumb}}">
                <div class="aui-img-body" style="padding-right: 12px;">
                    {{=it.itemData.title}}

                    {{? it.areamoney}}
                    <div class="aui-text-danger text-price mt-5">
                    {{? it.areamoney.min!=it.areamoney.max}}
                    ￥{{=it.areamoney.min}}-￥{{=it.areamoney.max}}
                    {{??}}
                    ￥{{=it.areamoney.min}}
                    {{?}}
                    </div>
                    {{?}}
                </div>
            </li>
            <li class="aui-list-view-cell" style="padding: 0;">
                <div class="aui-flex-col">
                    <div class="aui-flex-item-1">
                        <span class="aui-iconfont aui-icon-left aui-border-r"></span>
                    </div>
                    <div id="yanse" class="aui-flex-item-10" style="position: relative;height: 40px;">
                        <ul class="aui-clearfix">
                        {{ for(var i in it.cat){ }}
                        <li class="aui-pull-left {{? i== 0}}active{{?}}">
                            {{=it.cat[i].spec1}}
                        </li>
                        {{ } }}
                        </ul>

                    </div>
                    <div class="aui-flex-item-1">
                        <span class="aui-iconfont aui-icon-right aui-border-l"></span>
                    </div>

                </div>
            </li>
            <li class="aui-list-view-cell stockcell" style="padding: 0;">
                {{ for(var i in it.cat){ }}
                <ul class="aui-list-view" style="{{? i==0}}display: block;{{??}}display: none;{{?}}">
                  {{ for(var j in it.cat[i].content){ }}
                  <li class="aui-list-view-cell">
                        <div class="aui-pull-left desc">
                            {{=it.cat[i].content[j].spec2}} <span class="aui-text-danger">¥{{=it.cat[i].content[j].money}}</span>
                        </div>
                        <div class="aui-counter aui-danger aui-pull-right">
                            <span class="font-small">库存{{=it.cat[i].content[j].amount}}件</span>&nbsp;&nbsp;
                            <div class="aui-counter-minus" tapmode style="width:38px;"></div>
                            <input class="aui-counter-input" type="text" value="0" data-price="{{=it.cat[i].content[j].money}}" data-max="{{=it.cat[i].content[j].amount}}" data-id="{{=it.cat[i].content[j].id}}" style="width: 20px;">
                            <div class="aui-counter-plus" tapmode style="width: 38px;"></div>
                        </div>
                    </li>
                  {{ } }}
                </ul>
                {{ } }}
            </li>
        </ul>
        <i class="aui-iconfont aui-icon-roundclose text-gray" style="position: absolute;right:0px;top:0px;padding: 8px;font-size: 20px;" onclick="closeFrame();"></i>
    </script>
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/common.js"></script>
    <script type="text/javascript" src="../script/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="../script/doT.min.js"></script>
    <script type="text/javascript" src="../script/iscroll.js"></script>
    <script type="text/javascript">
      var itemid;
      apiready = function() {
           api.parseTapmode();

           var body_w=$api.offset($api.dom('body')).w;
           var body_h=$api.offset($api.dom('body')).h;
           
           $('<div id="bodyMask" style="width:'+body_w+'px;height:'+body_h+'px;background:rgba(0,0,0,0.3);" onclick="closeFrame();"></div>').appendTo($('body'));

           //fullfill template
           $content = $api.byId('header-content');
           var tpl = $api.byId('header-content-template').text;
           var tempFn = doT.template(tpl);
           api.pageParam.specData.itemData=api.pageParam.itemData;
           itemid=api.pageParam.itemData.itemid;
           $api.html($content, tempFn(api.pageParam.specData));


           //load scrolling header 
           var yanseWidth=0;
           $('#yanse li').each(function(){
            yanseWidth+=($(this).width()+20);
           });
           $('#yanse ul').width(yanseWidth);

           myScroll = new IScroll('#yanse', {
            scrollX: true,
            scrollY: false,
            mouseWheel: true ,
            vScroll: false,
            click:true,
            beforeScrollStart: function (e) {
                   if ( this.absDistX > (this.absDistY + 5 ) ) {
                       // user is scrolling the x axis, so prevent the browsers' native scrolling
                       e.preventDefault();
                   }
                }
           });

           var selectedSpecs=api.pageParam.selectedSpecs;
           if(selectedSpecs){
                selectedSpecs=selectedSpecs.split('-');
                for(var i in selectedSpecs){
                    if(selectedSpecs[i]){
                        var specStr=selectedSpecs[i];
                        var specArr=specStr.split('_');

                        $('.aui-counter-input').each(function(){
                            var objid=$(this).attr('data-id');
                            if(objid==specArr[0]){
                                $(this).val(specArr[1]);
                            }
                        })
                    }
                }
                updateTotal();
           }

           if(api.pageParam.onlyCart){
                $('#buyNow').remove();
                $('#add2Cart').addClass('aui-flex-item-12');
                $('#add2Cart').text('更新进货单');
           }
      }

      $(document).ready(function(){
        $('body').delegate('#yanse li','click',function(){
            $('#yanse li').removeClass('active');
            $(this).addClass('active');

        
            var selectIndex=$('#yanse li').index($(this));
            $('.stockcell .aui-list-view').hide();
            $('.stockcell .aui-list-view').eq(selectIndex).show();
        });

        $('#header-content').delegate('.aui-counter-plus','click',function(){
            $this=$(this);
            var inputobj=$this.siblings('.aui-counter-input');
            var counter=inputobj.val();
            counter++;

            var max=$this.siblings('.aui-counter-input').attr('data-max');
            counter=counter>max?max:counter;

            inputobj.val(counter);

            updateTotal();
        }).delegate('.aui-counter-minus','click',function(){
            $this=$(this);
            var inputobj=$this.siblings('.aui-counter-input');
            var counter=inputobj.val();
            counter--;
            counter=counter<0?0:counter;

            inputobj.val(counter);

            updateTotal();
        }).delegate('.aui-counter-input','change',function(){
            $this=$(this);
            var amount=parseInt($this.val());
            amount=amount<0?0:amount;

            var max=$this.attr('data-max');
            amount=amount>max?max:0;

            $this.val(amount);
            updateTotal();
        })

        //立即订购
        $('#buyNow').unbind('click').bind('click',function(){
            api.execScript({
                name:'proInfo_win',
                script:'go2Order(1)'
            });
        });

        //加入进货单
        $('#add2Cart').unbind('click').bind('click',function(){
            if(api.pageParam.onlyCart){
                var str=getStr();
                add2Cart(itemid,str);
            }else{
                api.execScript({
                    name:'proInfo_win',
                    script:'add2Cart(1)'
                }); 
            }
        })
      });

      function updateTotal(){
            var totalCount=0;
            var totalPrice=0;
            $('.aui-counter-input').each(function(){
                $this=$(this);
                var price=$this.attr('data-price');
                var count=parseInt($this.val());
                totalCount+=count;
                totalPrice+=price*count;
            });
            $('#totalCount').text(totalCount);
            $('#totalPrice').text(decimal(totalPrice,2));


            var str=getStr();

            api.execScript({
                name:'proInfo_win',
                script:'updateHiddenInput("'+str+'")'
            }); 
      }

      function getStr(){
            var str = "";
            var num = 0;
            var money = 0;
            var id = 0;
            $(".aui-counter-input").each(function () {
                num = $(this).val() * 1;
                if (num != 0) {
                    money = $(this).attr("data-price");
                    id = $(this).attr("data-id");
                    str += id + "_" + num + "_" + money + "-";
                }
            });
            return str;
      }



        function decimal(num,v){
            var vv = Math.pow(10,v);
            return Math.round(num*vv)/vv;
        }

      function closeFrame(){
           api.closeFrame();
      }

      function add2Cart(itemid,specs,isAdd){
            getStorageAll();
            var data = {
                goodsId: itemid,
                str: specs,
                userId: user_id,
            };
            var url = isAdd?'Mallcart/addCart':'Mallcart/updateCart';
            ajaxRequest(url, 'post', data, function (ret, err) {
                if (ret.status == 1) {
                    //发送监听
                    api.sendEvent({
                        name : 'updateCart',
                        extra : {
                            key : 'true'
                        }
                    });

                    //res
                    api.closeFrame({
                        name: 'proAttribute_frm'
                    });

                    api.toast({
                        msg: isAdd?'已加入进货单':'已更新进货单',
                        duration: 2000,
                        location: 'bottom'
                    });
                } else {
                    api.toast({
                        msg: ret.msg,
                        duration: 2000,
                        location: 'bottom'
                    });
                }
            });
      }
    </script>
</html>
